<template>
  <div class="p-6 space-y-6">
    <!-- 页面标题 -->
    <div class="text-center mb-8">
      <h1 class="text-3xl font-bold text-white mb-2 animate-glow">{{ ts('用户中心', '用户中心') }}</h1>
      <p class="text-electric-500">{{ ts('个性化政策服务平台', '个性化政策服务平台') }}</p>
    </div>

    <!-- 用户信息卡片 -->
    <div class="glass-card p-6">
      <div class="flex items-center space-x-6">
        <div class="w-20 h-20 rounded-full bg-gradient-to-r from-electric-500 to-tech-blue-500 flex items-center justify-center">
          <User class="w-10 h-10 text-white" />
        </div>
        <div class="flex-1">
          <h2 class="text-2xl font-bold text-white mb-1">{{ userInfo.name }}</h2>
          <p class="text-white/70 mb-2">{{ userInfo.type }} | {{ userInfo.level }}</p>
          <div class="flex items-center space-x-4 text-sm">
            <div class="flex items-center space-x-1">
              <Calendar class="w-4 h-4 text-electric-500" />
              <span class="text-white/70">{{ ts('注册时间', '注册时间') }}：{{ userInfo.registerDate }}</span>
            </div>
            <div class="flex items-center space-x-1">
              <Activity class="w-4 h-4 text-green-400" />
              <span class="text-white/70">{{ ts('最后活跃', '最后活跃') }}：{{ userInfo.lastActive }}</span>
            </div>
          </div>
        </div>
        <div class="text-right">
          <div class="text-2xl font-bold text-electric-500">{{ userInfo.points }}</div>
          <div class="text-white/70 text-sm">{{ ts('积分余额', '积分余额') }}</div>
        </div>
      </div>
    </div>

    <!-- 功能导航 -->
    <div class="flex space-x-1 glass-card p-1 rounded-xl">
      <button
        @click="activeTab = 'overview'"
        :class="[
          'flex-1 py-3 px-6 rounded-lg transition-all duration-200 font-medium',
          activeTab === 'overview'
            ? 'bg-electric-500 text-cyber-50'
            : 'text-white/70 hover:text-white hover:bg-white/10'
        ]"
      >
        {{ ts('概览', '概览') }}
      </button>
      <button
        @click="activeTab = 'preferences'"
        :class="[
          'flex-1 py-3 px-6 rounded-lg transition-all duration-200 font-medium',
          activeTab === 'preferences'
            ? 'bg-electric-500 text-cyber-50'
            : 'text-white/70 hover:text-white hover:bg-white/10'
        ]"
      >
        {{ ts('偏好设置', '偏好设置') }}
      </button>
      <button
        @click="activeTab = 'subscriptions'"
        :class="[
          'flex-1 py-3 px-6 rounded-lg transition-all duration-200 font-medium',
          activeTab === 'subscriptions'
            ? 'bg-electric-500 text-cyber-50'
            : 'text-white/70 hover:text-white hover:bg-white/10'
        ]"
      >
        {{ ts('订阅管理', '订阅管理') }}
      </button>
      <button
        @click="activeTab = 'vip'"
        :class="[
          'flex-1 py-3 px-6 rounded-lg transition-all duration-200 font-medium',
          activeTab === 'vip'
            ? 'bg-electric-500 text-cyber-50'
            : 'text-white/70 hover:text-white hover:bg-white/10'
        ]"
      >
        {{ ts('VIP服务', 'VIP服务') }}
      </button>
    </div>

    <!-- 概览标签页 -->
    <div v-if="activeTab === 'overview'">
      <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <!-- 统计数据 -->
        <div class="xl:col-span-2 space-y-6">
          <!-- 数据统计卡片 -->
          <div class="grid grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="glass-card p-4 text-center">
              <Bell class="w-8 h-8 text-yellow-400 mx-auto mb-2" />
              <div class="text-xl font-bold text-white">{{ userStats.notifications }}</div>
              <div class="text-electric-500 text-sm">{{ ts('推送通知', '推送通知') }}</div>
            </div>
            <div class="glass-card p-4 text-center">
              <Bookmark class="w-8 h-8 text-green-400 mx-auto mb-2" />
              <div class="text-xl font-bold text-white">{{ userStats.bookmarks }}</div>
              <div class="text-electric-500 text-sm">{{ ts('收藏政策', '收藏政策') }}</div>
            </div>
            <div class="glass-card p-4 text-center">
              <Target class="w-8 h-8 text-blue-400 mx-auto mb-2" />
              <div class="text-xl font-bold text-white">{{ userStats.matches }}</div>
              <div class="text-electric-500 text-sm">{{ ts('匹配推荐', '匹配推荐') }}</div>
            </div>
            <div class="glass-card p-4 text-center">
              <Clock class="w-8 h-8 text-purple-400 mx-auto mb-2" />
              <div class="text-xl font-bold text-white">{{ userStats.reminders }}</div>
              <div class="text-electric-500 text-sm">{{ ts('待办提醒', '待办提醒') }}</div>
            </div>
          </div>

          <!-- 最近活动 -->
          <div class="glass-card p-6">
            <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
              <Activity class="w-5 h-5 mr-2 text-green-400" />
              {{ ts('最近活动', '最近活动') }}
            </h3>
            <div class="space-y-4">
              <div
                v-for="activity in recentActivities"
                :key="activity.id"
                class="flex items-start space-x-4 p-3 bg-white/5 rounded-lg"
              >
                <component 
                  :is="getActivityIcon(activity.type)" 
                  :class="`w-5 h-5 ${getActivityColor(activity.type)}`" 
                />
                <div class="flex-1">
                  <p class="text-white text-sm">{{ activity.description }}</p>
                  <p class="text-white/70 text-xs mt-1">{{ activity.timestamp }}</p>
                </div>
              </div>
            </div>
          </div>

          <!-- 推荐政策 -->
          <div class="glass-card p-6">
            <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
              <Sparkles class="w-5 h-5 mr-2 text-yellow-400" />
              {{ ts('智能推荐', '智能推荐') }}
            </h3>
            <div class="space-y-3">
              <div
                v-for="policy in recommendedPolicies"
                :key="policy.id"
                class="border border-white/20 rounded-lg p-4 hover:border-electric-500/50 transition-colors cursor-pointer"
              >
                <div class="flex items-start justify-between">
                  <div class="flex-1">
                    <h4 class="text-white font-medium mb-1">{{ policy.title }}</h4>
                    <p class="text-white/70 text-sm mb-2">{{ policy.summary }}</p>
                    <div class="flex items-center space-x-2">
                      <span class="px-2 py-1 bg-green-500/20 text-green-300 rounded text-xs">
                        {{ policy.matchScore }}% {{ ts('匹配', '匹配') }}
                      </span>
                      <span class="px-2 py-1 bg-blue-500/20 text-blue-300 rounded text-xs">
                        {{ policy.category }}
                      </span>
                    </div>
                  </div>
                  <button class="text-electric-500 hover:text-electric-400">
                    <ChevronRight class="w-4 h-4" />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 侧边栏 -->
        <div class="space-y-6">
          <!-- 等级进度 -->
          <div class="glass-card p-6">
            <h4 class="text-lg font-semibold text-white mb-4 flex items-center">
              <Award class="w-5 h-5 mr-2 text-yellow-400" />
              {{ ts('等级进度', '等级进度') }}
            </h4>
            <div class="text-center mb-4">
              <div class="text-2xl font-bold text-electric-500 mb-1">{{ userInfo.level }}</div>
              <div class="text-white/70 text-sm">{{ userInfo.nextLevel }} {{ ts('还需 ' + userInfo.pointsToNext + ' 积分', '还需 ' + userInfo.pointsToNext + ' 积分') }}</div>
            </div>
            <div class="w-full bg-white/20 rounded-full h-2 mb-4">
              <div 
                class="bg-gradient-to-r from-electric-500 to-tech-blue-500 h-2 rounded-full"
                :style="{ width: userInfo.levelProgress + '%' }"
              ></div>
            </div>
            <div class="grid grid-cols-2 gap-4 text-sm">
              <div class="text-center p-2 bg-white/5 rounded">
                <div class="text-white/70">{{ ts('当前等级', '当前等级') }}</div>
                <div class="text-white font-semibold">{{ userInfo.level }}</div>
              </div>
              <div class="text-center p-2 bg-white/5 rounded">
                <div class="text-white/70">{{ ts('下一等级', '下一等级') }}</div>
                <div class="text-white font-semibold">{{ userInfo.nextLevel }}</div>
              </div>
            </div>
          </div>

          <!-- 快捷操作 -->
          <div class="glass-card p-6">
            <h4 class="text-lg font-semibold text-white mb-4 flex items-center">
              <Zap class="w-5 h-5 mr-2 text-electric-500" />
              快捷操作
            </h4>
            <div class="space-y-3">
              <button class="w-full cyber-button flex items-center space-x-2">
                <Search class="w-4 h-4" />
                <span>政策查询</span>
              </button>
              <button class="w-full cyber-button flex items-center space-x-2">
                <GitCompare class="w-4 h-4" />
                <span>政策对比</span>
              </button>
              <button class="w-full cyber-button flex items-center space-x-2">
                <Target class="w-4 h-4" />
                <span>智能匹配</span>
              </button>
              <button class="w-full cyber-button flex items-center space-x-2">
                <MessageSquare class="w-4 h-4" />
                <span>AI咨询</span>
              </button>
            </div>
          </div>

          <!-- 今日提醒 -->
          <div class="glass-card p-6">
            <h4 class="text-lg font-semibold text-white mb-4 flex items-center">
              <Clock class="w-5 h-5 mr-2 text-purple-400" />
              今日提醒
            </h4>
            <div class="space-y-3">
              <div
                v-for="reminder in todayReminders"
                :key="reminder.id"
                class="p-3 bg-white/5 rounded-lg"
              >
                <div class="flex items-center justify-between mb-1">
                  <h5 class="text-white text-sm font-medium">{{ reminder.title }}</h5>
                  <span class="text-electric-500 text-xs">{{ reminder.time }}</span>
                </div>
                <p class="text-white/70 text-xs">{{ reminder.description }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 偏好设置标签页 -->
    <div v-if="activeTab === 'preferences'">
      <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
        <!-- 个人信息 -->
        <div class="glass-card p-6">
          <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
            <User class="w-5 h-5 mr-2 text-tech-blue-400" />
            个人信息
          </h3>
          <div class="space-y-4">
            <div>
              <label class="block text-white text-sm font-medium mb-2">姓名</label>
              <input
                v-model="userProfile.name"
                type="text"
                class="cyber-input"
              />
            </div>
            <div>
              <label class="block text-white text-sm font-medium mb-2">用户类型</label>
              <select v-model="userProfile.type" class="cyber-input">
                <option value="个人用户">个人用户</option>
                <option value="企业用户">企业用户</option>
                <option value="机构用户">机构用户</option>
              </select>
            </div>
            <div>
              <label class="block text-white text-sm font-medium mb-2">所在地区</label>
              <select v-model="userProfile.region" class="cyber-input">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广东">广东</option>
                <option value="江苏">江苏</option>
                <option value="浙江">浙江</option>
              </select>
            </div>
            <div>
              <label class="block text-white text-sm font-medium mb-2">行业领域</label>
              <select v-model="userProfile.industry" class="cyber-input">
                <option value="信息技术">信息技术</option>
                <option value="制造业">制造业</option>
                <option value="金融业">金融业</option>
                <option value="服务业">服务业</option>
                <option value="教育">教育</option>
              </select>
            </div>
            <button class="cyber-button w-full">保存信息</button>
          </div>
        </div>

        <!-- 推送偏好 -->
        <div class="glass-card p-6">
          <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
            <Bell class="w-5 h-5 mr-2 text-yellow-400" />
            推送偏好
          </h3>
          <div class="space-y-4">
            <div>
              <label class="block text-white text-sm font-medium mb-3">关注政策类型</label>
              <div class="grid grid-cols-2 gap-3">
                <label
                  v-for="category in policyCategories"
                  :key="category"
                  class="flex items-center space-x-2 cursor-pointer"
                >
                  <input
                    type="checkbox"
                    :value="category"
                    v-model="userPreferences.categories"
                    class="w-4 h-4 text-electric-500"
                  />
                  <span class="text-white text-sm">{{ category }}</span>
                </label>
              </div>
            </div>

            <div>
              <label class="block text-white text-sm font-medium mb-3">推送频率</label>
              <div class="space-y-2">
                <label class="flex items-center space-x-2 cursor-pointer">
                  <input
                    type="radio"
                    value="realtime"
                    v-model="userPreferences.frequency"
                    class="w-4 h-4 text-electric-500"
                  />
                  <span class="text-white text-sm">实时推送</span>
                </label>
                <label class="flex items-center space-x-2 cursor-pointer">
                  <input
                    type="radio"
                    value="daily"
                    v-model="userPreferences.frequency"
                    class="w-4 h-4 text-electric-500"
                  />
                  <span class="text-white text-sm">每日汇总</span>
                </label>
                <label class="flex items-center space-x-2 cursor-pointer">
                  <input
                    type="radio"
                    value="weekly"
                    v-model="userPreferences.frequency"
                    class="w-4 h-4 text-electric-500"
                  />
                  <span class="text-white text-sm">每周汇总</span>
                </label>
              </div>
            </div>

            <div>
              <label class="block text-white text-sm font-medium mb-3">推送时间</label>
              <div class="grid grid-cols-2 gap-4">
                <div>
                  <label class="block text-white/70 text-xs mb-1">开始时间</label>
                  <input
                    v-model="userPreferences.timeRange.start"
                    type="time"
                    class="cyber-input"
                  />
                </div>
                <div>
                  <label class="block text-white/70 text-xs mb-1">结束时间</label>
                  <input
                    v-model="userPreferences.timeRange.end"
                    type="time"
                    class="cyber-input"
                  />
                </div>
              </div>
            </div>

            <button class="cyber-button w-full">保存偏好</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 订阅管理标签页 -->
    <div v-if="activeTab === 'subscriptions'">
      <div class="grid grid-cols-1 xl:grid-cols-2 gap-6">
        <!-- 我的订阅 -->
        <div class="glass-card p-6">
          <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
            <Bookmark class="w-5 h-5 mr-2 text-green-400" />
            我的订阅
          </h3>
          <div class="space-y-4">
            <div
              v-for="subscription in userSubscriptions"
              :key="subscription.id"
              class="border border-white/20 rounded-lg p-4"
            >
              <div class="flex items-start justify-between">
                <div class="flex-1">
                  <h4 class="text-white font-medium mb-1">{{ subscription.name }}</h4>
                  <p class="text-white/70 text-sm mb-2">{{ subscription.description }}</p>
                  <div class="flex items-center space-x-2">
                    <span :class="subscription.active ? 'status-success' : 'status-error'">
                      {{ subscription.active ? '已启用' : '已暂停' }}
                    </span>
                    <span class="text-white/70 text-xs">
                      创建于 {{ subscription.createdAt }}
                    </span>
                  </div>
                </div>
                <div class="flex space-x-2">
                  <button 
                    @click="toggleSubscription(subscription)"
                    :class="subscription.active ? 'bg-red-500 hover:bg-red-600' : 'bg-green-500 hover:bg-green-600'"
                    class="text-white px-3 py-1 rounded text-sm transition-colors"
                  >
                    {{ subscription.active ? '暂停' : '启用' }}
                  </button>
                  <button class="text-red-400 hover:text-red-300">
                    <Trash2 class="w-4 h-4" />
                  </button>
                </div>
              </div>
            </div>
          </div>
          
          <button class="cyber-button w-full mt-4">
            <Plus class="w-4 h-4 mr-2" />
            新增订阅
          </button>
        </div>

        <!-- 推荐订阅 -->
        <div class="glass-card p-6">
          <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
            <Sparkles class="w-5 h-5 mr-2 text-yellow-400" />
            推荐订阅
          </h3>
          <div class="space-y-4">
            <div
              v-for="recommendation in recommendedSubscriptions"
              :key="recommendation.id"
              class="border border-white/20 rounded-lg p-4 hover:border-electric-500/50 transition-colors"
            >
              <div class="flex items-start justify-between">
                <div class="flex-1">
                  <h4 class="text-white font-medium mb-1">{{ recommendation.name }}</h4>
                  <p class="text-white/70 text-sm mb-2">{{ recommendation.description }}</p>
                  <div class="flex items-center space-x-2">
                    <span class="px-2 py-1 bg-green-500/20 text-green-300 rounded text-xs">
                      匹配度 {{ recommendation.matchScore }}%
                    </span>
                    <span class="px-2 py-1 bg-blue-500/20 text-blue-300 rounded text-xs">
                      {{ recommendation.category }}
                    </span>
                  </div>
                </div>
                <button class="cyber-button text-sm px-4 py-2">
                  订阅
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- VIP服务标签页 -->
    <div v-if="activeTab === 'vip'">
      <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        <!-- VIP状态 -->
        <div class="xl:col-span-2 space-y-6">
          <!-- VIP信息卡片 -->
          <div class="glass-card p-6 bg-gradient-to-r from-yellow-500/10 to-orange-500/10 border-yellow-500/30">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-xl font-semibold text-white flex items-center">
                <Crown class="w-6 h-6 mr-2 text-yellow-400" />
                VIP会员
              </h3>
              <span :class="userInfo.isVip ? 'status-success' : 'status-warning'">
                {{ userInfo.isVip ? 'VIP用户' : '普通用户' }}
              </span>
            </div>
            
            <div v-if="userInfo.isVip" class="space-y-4">
              <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="text-center">
                  <div class="text-2xl font-bold text-yellow-400">{{ vipInfo.level }}</div>
                  <div class="text-white/70 text-sm">VIP等级</div>
                </div>
                <div class="text-center">
                  <div class="text-2xl font-bold text-yellow-400">{{ vipInfo.daysLeft }}</div>
                  <div class="text-white/70 text-sm">剩余天数</div>
                </div>
                <div class="text-center">
                  <div class="text-2xl font-bold text-yellow-400">{{ vipInfo.usedQuota }}</div>
                  <div class="text-white/70 text-sm">已用额度</div>
                </div>
                <div class="text-center">
                  <div class="text-2xl font-bold text-yellow-400">{{ vipInfo.totalQuota }}</div>
                  <div class="text-white/70 text-sm">总额度</div>
                </div>
              </div>
              
              <div class="bg-white/10 rounded-lg p-4">
                <h4 class="text-white font-medium mb-2">专属特权</h4>
                <div class="grid grid-cols-2 gap-2 text-sm">
                  <div class="flex items-center space-x-2">
                    <Check class="w-4 h-4 text-green-400" />
                    <span class="text-white/70">优先推送</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <Check class="w-4 h-4 text-green-400" />
                    <span class="text-white/70">专属客服</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <Check class="w-4 h-4 text-green-400" />
                    <span class="text-white/70">高级分析</span>
                  </div>
                  <div class="flex items-center space-x-2">
                    <Check class="w-4 h-4 text-green-400" />
                    <span class="text-white/70">API调用</span>
                  </div>
                </div>
              </div>
            </div>
            
            <div v-else class="text-center py-8">
              <Crown class="w-16 h-16 text-yellow-400 mx-auto mb-4" />
              <p class="text-white/70 mb-4">升级VIP，享受专属服务</p>
              <button class="cyber-button bg-gradient-to-r from-yellow-500 to-orange-500">
                立即升级
              </button>
            </div>
          </div>

          <!-- VIP服务记录 -->
          <div class="glass-card p-6">
            <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
              <History class="w-5 h-5 mr-2 text-blue-400" />
              服务记录
            </h3>
            <div class="space-y-4">
              <div
                v-for="record in vipServiceRecords"
                :key="record.id"
                class="flex items-center justify-between p-3 bg-white/5 rounded-lg"
              >
                <div class="flex items-center space-x-3">
                  <component 
                    :is="getServiceIcon(record.type)" 
                    :class="`w-5 h-5 ${getServiceColor(record.type)}`" 
                  />
                  <div>
                    <h4 class="text-white text-sm font-medium">{{ record.service }}</h4>
                    <p class="text-white/70 text-xs">{{ record.description }}</p>
                  </div>
                </div>
                <div class="text-right">
                  <div class="text-electric-500 text-sm">{{ record.date }}</div>
                  <div class="text-white/70 text-xs">{{ record.status }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- VIP套餐 -->
        <div class="space-y-6">
          <div class="glass-card p-6">
            <h3 class="text-xl font-semibold text-white mb-4 flex items-center">
              <Package class="w-5 h-5 mr-2 text-purple-400" />
              VIP套餐
            </h3>
            <div class="space-y-4">
              <div
                v-for="plan in vipPlans"
                :key="plan.id"
                :class="[
                  'border-2 rounded-lg p-4 cursor-pointer transition-all duration-200',
                  plan.recommended 
                    ? 'border-yellow-500 bg-yellow-500/10' 
                    : 'border-white/20 hover:border-white/40'
                ]"
              >
                <div class="text-center mb-3">
                  <h4 class="text-white font-semibold">{{ plan.name }}</h4>
                  <div class="text-2xl font-bold text-electric-500 my-2">
                    ¥{{ plan.price }}
                    <span class="text-sm text-white/70">/{{ plan.period }}</span>
                  </div>
                  <div v-if="plan.recommended" class="text-yellow-400 text-xs">
                    <Star class="w-3 h-3 inline mr-1" />
                    推荐
                  </div>
                </div>
                <div class="space-y-2 text-sm">
                  <div
                    v-for="feature in plan.features"
                    :key="feature"
                    class="flex items-center space-x-2"
                  >
                    <Check class="w-3 h-3 text-green-400" />
                    <span class="text-white/70">{{ feature }}</span>
                  </div>
                </div>
                <button class="w-full cyber-button mt-4 text-sm">
                  {{ userInfo.isVip && userInfo.vipPlan === plan.id ? '当前套餐' : '选择套餐' }}
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { 
  User,
  Calendar,
  Activity,
  Bell,
  Bookmark,
  Target,
  Clock,
  Sparkles,
  Award,
  Zap,
  Search,
  GitCompare,
  MessageSquare,
  ChevronRight,
  Plus,
  Trash2,
  Crown,
  Check,
  History,
  Package,
  Star
} from 'lucide-vue-next'
import { useTranslation } from '../composables/useTranslation.js'

export default {
  name: 'UserCenter',
  components: {
    User,
    Calendar,
    Activity,
    Bell,
    Bookmark,
    Target,
    Clock,
    Sparkles,
    Award,
    Zap,
    Search,
    GitCompare,
    MessageSquare,
    ChevronRight,
    Plus,
    Trash2,
    Crown,
    Check,
    History,
    Package,
    Star
  },
  
  setup() {
    const { ts } = useTranslation()
    
    return {
      ts
    }
  },
  computed: {
          currentLevel: '当前等级',
          nextLevel: '下一等级'
        },
        en: {
          userCenter: 'User Center',
          personalizedPolicyService: 'Personalized Policy Service and Management Center',
  },
  data() {
    return {
      activeTab: 'overview',
      
      userInfo: {
        name: '张明',
        type: '企业用户',
        level: 'VIP白金',
        nextLevel: 'VIP钻石',
        points: 1280,
        pointsToNext: 220,
        levelProgress: 75,
        registerDate: '2023-08-15',
        lastActive: '2小时前',
        isVip: true,
        vipPlan: 'premium'
      },
      
      userProfile: {
        name: '张明',
        type: '企业用户',
        region: '北京',
        industry: '信息技术'
      },
      
      userPreferences: {
        categories: ['财税政策', '科技政策'],
        frequency: 'daily',
        timeRange: {
          start: '09:00',
          end: '18:00'
        }
      },
      
      userStats: {
        notifications: 24,
        bookmarks: 8,
        matches: 15,
        reminders: 4
      },
      
      recentActivities: [
        {
          id: 1,
          type: 'search',
          description: '查询了"小微企业税收优惠"相关政策',
          timestamp: '2小时前'
        },
        {
          id: 2,
          type: 'bookmark',
          description: '收藏了"数字化转型专项扶持政策"',
          timestamp: '5小时前'
        },
        {
          id: 3,
          type: 'match',
          description: '获得了3条新的政策匹配推荐',
          timestamp: '1天前'
        },
        {
          id: 4,
          type: 'reminder',
          description: '设置了政策申请截止日期提醒',
          timestamp: '2天前'
        }
      ],
      
      recommendedPolicies: [
        {
          id: 1,
          title: '高新技术企业认定管理办法',
          summary: '针对符合条件的高新技术企业，提供税收优惠和资金支持。',
          matchScore: 95,
          category: '科技政策'
        },
        {
          id: 2,
          title: '中小企业数字化转型补贴',
          summary: '支持中小企业进行数字化转型升级，最高补贴50万元。',
          matchScore: 88,
          category: '产业政策'
        },
        {
          id: 3,
          title: '研发费用加计扣除政策',
          summary: '企业研发费用可按200%比例在税前扣除。',
          matchScore: 82,
          category: '财税政策'
        }
      ],
      
      todayReminders: [
        {
          id: 1,
          title: '高新技术企业认定申请',
          description: '申请截止日期临近，请及时提交材料',
          time: '14:00'
        },
        {
          id: 2,
          title: '税收优惠政策咨询',
          description: '与税务专家的咨询会议',
          time: '16:30'
        },
        {
          id: 3,
          title: '政策解读会议',
          description: '参加最新产业政策解读会议',
          time: '19:00'
        }
      ],
      
      userSubscriptions: [
        {
          id: 1,
          name: '财税政策推送',
          description: '实时接收最新的财税政策信息',
          active: true,
          createdAt: '2023-09-01'
        },
        {
          id: 2,
          name: '科技创新政策',
          description: '关注科技创新相关的政策动态',
          active: true,
          createdAt: '2023-09-15'
        },
        {
          id: 3,
          name: '企业扶持政策',
          description: '获取企业扶持相关政策信息',
          active: false,
          createdAt: '2023-10-01'
        }
      ],
      
      recommendedSubscriptions: [
        {
          id: 1,
          name: '人才政策订阅',
          description: '获取人才引进和培养相关政策',
          matchScore: 92,
          category: '人才政策'
        },
        {
          id: 2,
          name: '环保政策追踪',
          description: '关注环保和可持续发展政策',
          matchScore: 85,
          category: '环保政策'
        }
      ],
      
      vipInfo: {
        level: '白金',
        daysLeft: 45,
        usedQuota: 68,
        totalQuota: 200
      },
      
      vipServiceRecords: [
        {
          id: 1,
          type: 'analysis',
          service: '专属政策分析',
          description: '为您定制的政策影响分析报告',
          date: '2024-01-20',
          status: '已完成'
        },
        {
          id: 2,
          type: 'consultation',
          service: '专家咨询服务',
          description: '一对一政策解读咨询',
          date: '2024-01-18',
          status: '已完成'
        },
        {
          id: 3,
          type: 'priority',
          service: '优先推送',
          description: '重要政策信息优先推送',
          date: '2024-01-15',
          status: '进行中'
        }
      ],
      
      vipPlans: [
        {
          id: 'basic',
          name: '基础版',
          price: 98,
          period: '月',
          recommended: false,
          features: [
            '政策智能推送',
            '基础匹配服务',
            '标准客服支持',
            '月度政策报告'
          ]
        },
        {
          id: 'premium',
          name: '专业版',
          price: 298,
          period: '月',
          recommended: true,
          features: [
            '高级智能推送',
            '精准匹配服务',
            '专属客服支持',
            '周度政策报告',
            '专家在线咨询',
            'API接口调用'
          ]
        },
        {
          id: 'enterprise',
          name: '企业版',
          price: 988,
          period: '月',
          recommended: false,
          features: [
            '全方位智能推送',
            '企业定制匹配',
            '7x24专属客服',
            '实时政策报告',
            '专家团队咨询',
            '无限API调用',
            '定制化服务'
          ]
        }
      ],
      
      policyCategories: [
        '财税政策', '产业政策', '科技政策', 
        '金融政策', '环保政策', '人才政策'
      ]
    }
  },
  
  methods: {
    
    getActivityIcon(type) {
      const icons = {
        search: 'Search',
        bookmark: 'Bookmark',
        match: 'Target',
        reminder: 'Clock'
      }
      return icons[type] || 'Activity'
    },
    
    getActivityColor(type) {
      const colors = {
        search: 'text-blue-400',
        bookmark: 'text-green-400',
        match: 'text-yellow-400',
        reminder: 'text-purple-400'
      }
      return colors[type] || 'text-white'
    },
    
    getServiceIcon(type) {
      const icons = {
        analysis: 'BarChart',
        consultation: 'MessageSquare',
        priority: 'Bell'
      }
      return icons[type] || 'Activity'
    },
    
    getServiceColor(type) {
      const colors = {
        analysis: 'text-blue-400',
        consultation: 'text-green-400',
        priority: 'text-yellow-400'
      }
      return colors[type] || 'text-white'
    },
    
    toggleSubscription(subscription) {
      subscription.active = !subscription.active
    }
  }
}
</script>

<style scoped>
.status-success {
  @apply px-2 py-1 bg-green-500/20 text-green-300 rounded text-xs;
}

.status-warning {
  @apply px-2 py-1 bg-yellow-500/20 text-yellow-300 rounded text-xs;
}

.status-error {
  @apply px-2 py-1 bg-red-500/20 text-red-300 rounded text-xs;
}
</style> 